<template>
  <div class="reg_wrapper">
    <el-table
      :data="regs"
      style="width: 100%">
      <!-- ['单号','宠物ID','费用', '预约时间','服务名', '对接医生'] -->
      <el-table-column 
        label="单号"
        width="110" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span v-clipboard:copy="scope.row.regNo" v-clipboard:success="onCopy" v-clipboard:error="onCopyError" style="margin-left: 10px">REG-{{ scope.row.regNo.substring(0,10) }}</span>
        </template>
      </el-table-column>
            <!-- ['单号','宠物ID','费用', '预约时间','服务名', '对接医生'] -->
      <el-table-column
        label="宠物ID"
        width="110" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.petId }}</span>
        </template>
      </el-table-column>
            <!-- ['单号','宠物ID','费用', '预约时间','服务名', '对接医生'] -->
      <el-table-column
        label="费用"
        width="110" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">￥{{ scope.row.money }}</span>
        </template>
      </el-table-column>
            <!-- ['单号','宠物ID','费用', '预约时间','服务名', '对接医生'] -->
      <el-table-column
        label="预约时间"
        width="170" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
            <!-- ['单号','宠物ID','费用', '预约时间','服务名', '对接医生'] -->
      <el-table-column
        label="服务名"
        width="110" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.section.sectionname }}</span>
        </template>
      </el-table-column>
            <!-- ['单号','宠物ID','费用', '预约时间','服务名', '对接医生'] -->
      <el-table-column
        align="center"
        label="对接医生"
        width="80">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.doctor.realname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
            <el-table-column
        align="center"
        label="预约人"
        >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.petOwn.nickname}}</p>
            <p>真名: {{ scope.row.petOwn.realname }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.petOwn.nickname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      
      <!-- <el-table-column 
        width="auto"
        label="操作" 
        align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import {myGet} from '../utils/api'
  export default {
    data() {
      return {
        regs: [],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted() {
      console.debug('mounted')
      var docId = window.localStorage.getItem("doctor_id");
      if(window.localStorage.getItem("position") == '护士'){
        docId = '' 
      }
      myGet("/reg/all?docId="+docId, {}).then(res => {
        console.debug(res.data.res)
        this.regs = res.data.res
      }).catch(err => {console.debug(err)})
      console.debug('mounted end')
    },
    methods: {
      onCopyError(){
        this.$message({showClose: true, message: '复制失败', type: 'error'})
      },
      onCopy(e){
        this.$message({showClose: true, message: '复制成功', type: 'success'})
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

<style>
.reg_wrapper  .el-table{
  border-radius: 7px;
}
</style>

<style scoped>
.reg_wrapper{
  border-radius: 7px;
}
</style>